<template>
    <div>
        <!-- <kt-button :label="$t('action.batchDelete')" :perms="permsDelete" :size="size" type="danger" @click="handleBatchDelete()" 
        :disabled="this.selections.length===0" style="float:left;" v-if="showBatchDelete & showOperation & check"/>-->
        <!--表格栏-->
        <el-table
            :data="data.content"
            :highlight-current-row="highlightCurrentRow"
            @selection-change="selectionChange"
            @current-change="handleCurrentChange"
            @cell-click="handleCellClick" 
            v-loading="loading"
            :element-loading-text="$t('action.loading')"
            :border="border"
            :stripe="stripe"
            :show-overflow-tooltip="showOverflowTooltip"
            :max-height="maxHeight"
            :size="size"
            :align="align"
            style="width:100%;"
            :row-style="rowStyle"
        >
            <el-table-column type="selection" width="50" v-if="showBatchDelete & showOperation"></el-table-column>
            <el-table-column
                v-for="column in columns"
                header-align="center"
                align="center"
                :show-overflow-tooltip="true"
                :prop="column.prop"
                :label="column.label"
                :width="column.width"
                :min-width="column.minWidth"
                :sortable="column.sortable!=null?true:column.sortable"
                :fixed="column.fixed"
                :key="column.prop"
                :type="column.type"
                :formatter="column.formatter"
            ></el-table-column>
            <!-- 客户管理 代理商 客户类型 -->
            <el-table-column
                label="审核状态"
                width="100"
                fixed="right"
                align="center"
                v-if="showOperation&directCampCenterschool"
            >
                <template slot-scope="scope">
                    <span>{{ scope.row.auditStatusStr }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="客户类型"
                width="100"
                fixed="right"
                align="center"
                v-if="showOperation&directCampCenterschool"
            >
                <template slot-scope="scope">
                    <span>{{ scope.row.type }}</span>
                </template>
            </el-table-column>
            <!-- 客户管理  学校客户 -->
            <el-table-column
                :label="$t('action.operation')"
                width="180"
                fixed="right"
                v-if="showOperation&customerschool"
                header-align="center"
                align="center"
            >
                <template slot-scope="scope">
                    <el-switch
                        class="demo"
                        v-if="hasPerms('customer:school:switch')"
                        :active-text="test1"
                        :inactive-text="test2"
                        v-model="scope.row.isLock"
                        @change="changeSwitch(scope.$index,scope.row)"
                        active-value="2"
                        inactive-value="1"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                    ></el-switch>

                    <kt-button
                        type="text"
                        :label="$t('action.see')"
                        :perms="permsSee"
                        :size="size"
                        @click="handleSee(scope.$index, scope.row)"
                    />
                    <!-- <kt-button
                        type="text"
                        :disabled="scope.row.type2==4?true:false"
                        :label="$t('action.modify')"
                        :perms="permsEdit"
                        :size="size"
                        @click="handleEdit(scope.$index, scope.row)"
                    /> -->
                    <kt-button
                        type="text"
                        :label="$t('action.modify')"
                        :perms="permsEdit"
                        :size="size"
                        @click="handleEdit(scope.$index, scope.row)"
                    />
                    <kt-button
                        type="text"
                        :label="$t('action.Follow')"
                        :perms="permsFollow"
                        :size="size"
                        @click="handleFollow(scope.$index, scope.row)"
                    />
                    <kt-button
                        type="text"
                        label="报备"
                        :perms="permsReport"
                        :size="size"
                        @click="handleReport(scope.$index, scope.row)"
                    />
                </template>
            </el-table-column>

            <el-table-column
                :label="$t('action.operation')"
                width="180"
                fixed="right"
                v-if="showOperation&directCampCenterschool"
                header-align="center"
                align="center"
            >
                <template slot-scope="scope">
                    <el-switch
                        class="demo"
                        v-if="hasPerms('directCampCenter:school:switch')||'directCampCenter:tz:school:switch'"
                        :active-text="test1"
                        :inactive-text="test2"
                        v-model="scope.row.isLock"
                        @change="changeSwitch(scope.$index,scope.row)"
                        active-value="2"
                        inactive-value="1"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                    ></el-switch>

                    <kt-button
                        type="text"
                        :label="$t('action.see')"
                        :perms="permsSee"
                        :size="size"
                        @click="handleSee(scope.$index, scope.row)"
                    />
                    <kt-button
                        type="text"
                        :disabled="(scope.row.type2==4||scope.row.auditStatus==2)?true:false"
                        :label="$t('action.modify')"
                        :perms="permsEdit"
                        :size="size"
                        @click="handleEdit(scope.$index, scope.row)"
                    />
                    <kt-button
                        type="text"
                        :label="$t('action.Follow')"
                        :perms="permsFollow"
                        :size="size"
                        @click="handleFollow(scope.$index, scope.row)"
                    />
                    <kt-button
                        type="text"
                        label="报备"
                        :perms="permsReport"
                        :size="size"
                        @click="handleReport(scope.$index, scope.row)"
                    />
                    <!-- <kt-button :label="$t('action.see')" :perms="permsSee" :size="size" @click="handleSee(scope.$index, scope.row)" />
                    <kt-button :label="$t('action.modify')" :perms="permsEdit" :size="size" @click="handleEdit(scope.$index, scope.row)" />-->
                </template>
            </el-table-column>

            <!-- 查看学校客户  跟进情况 查看按钮-->
            <el-table-column
                :label="$t('action.see')"
                width="200"
                fixed="right"
                v-if="showOperation&see"
                header-align="center"
                align="center"
            >
                <template slot-scope="scope">
                    <kt-button
                        :label="$t('action.see')"
                        perms="customerdistribution:school:see"
                        :size="size"
                        @click="handleFollow(scope.$index, scope.row)"
                    />
                </template>
            </el-table-column>
            <!-- 资源划分  学校 -->
            <el-table-column
                :label="$t('action.operation')"
                width="200"
                fixed="right"
                v-if="showOperation&ResourceDivisionschool"
                header-align="center"
                align="center"
            >
                <template slot-scope="scope">
                    <kt-button
                        :label="$t('action.see')"
                        :perms="permsSee"
                        :size="size"
                        @click="handleSee(scope.$index, scope.row)"
                    />
                    <kt-button
                        :label="$t('action.modify')"
                        :perms="permsEdit"
                        :size="size"
                        @click="handleEdit(scope.$index, scope.row)"
                    />
                </template>
            </el-table-column>

            <!-- 客户分配 学校 -->
            <el-table-column
                :label="$t('action.operation')"
                width="200"
                fixed="right"
                v-if="showOperation&customerdistributionschool"
                header-align="center"
                align="center"
            >
                <template slot-scope="scope">
                    <kt-button
                        :label="$t('action.see')"
                        :perms="permsSee"
                        :size="size"
                        @click="handleSee(scope.$index, scope.row)"
                    />
                    <kt-button
                        :label="$t('action.modify')"
                        :perms="permsEdit"
                        :size="size"
                        @click="handleEdit(scope.$index, scope.row)"
                    />
                </template>
            </el-table-column>
            <!-- 外呼对应关系 -->
            <el-table-column
                :label="$t('action.operation')"
                width="400"
                fixed="right"
                v-if="showOperation&outcry"
                header-align="center"
                align="center"
            >
                <template slot-scope="scope">
                    <kt-button
                        :label="$t('绑定用户')"
                        :perms="permsBind"
                        :size="size"
                        @click="handleBinduser(scope.$index, scope.row)"
                    />
                    <kt-button
                        :label="$t('解绑')"
                        :perms="permsUnbind"
                        :size="size"
                        @click="handleUntie(scope.$index, scope.row)"
                    />
                    <kt-button
                        :label="$t('删除')"
                        :perms="permsDelete"
                        :size="size"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)"
                    />
                </template>
            </el-table-column>
            <!--客户跟进日志  学校客户 -->
            <el-table-column
                :label="$t('action.operation')"
                width="100"
                fixed="right"
                v-if="showOperation&CustomerFollowlogsch"
                header-align="center"
                align="center"
            >
                <template slot-scope="scope">
                    <kt-button
                        :label="$t('action.see')"
                        perms="true"
                        :size="size"
                        @click="handleSee(scope.$index, scope.row)"
                    />
                </template>
            </el-table-column>
        </el-table>
        <!--分页栏-->
        <div class="toolbar" style="padding:10px;">
            <el-pagination
                layout="total, sizes, prev, pager, next, jumper"
                @current-change="refreshPageRequest"
                v-if="order"
                @size-change="sizeChange"
                :current-page="pageRequest.pageNum"
                :page-size="pageRequest.pageSize"
                :total="data.totalSize"
                style="float:right;"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
import CrmSwitch from "@/views/Core/CrmSwitch";
import KtButton from "@/views/Core/KtButton";
import { hasPermission } from "@/permission/index.js";
export default {
    name: "StTable",
    components: {
        KtButton,
        CrmSwitch
    },
    props: {
        value: {
            type: String
        },
        perms: {
            // 按钮权限标识，外部使用者传入
            type: String,
            default: null
        },
        test1: {
            type: String,
            default: "解锁"
        },
        test2: {
            type: String,
            default: "锁定"
        },
        columns: Array, // 表格列配置
        data: Object, // 表格分页数据
        permsSee: String, //查看按钮标识
        permsEdit: String, // 编辑权限标识
        permsFollow: String,
        directCampCenterschool: Boolean,
        permsBind: String, //绑定标识
        permsUnbind: String, //解绑标识
        permsDelete: String, //删除标识
        OEM: Boolean, //控制oem按钮
        person: Boolean,
        outcry: Boolean, //外呼按钮
        newMessage: Boolean, //新增消息按钮
        customerschool: Boolean,
        ResourceDivisionschool: Boolean,
        permsReport: String, //报备
        customerdistributionschool: Boolean,
        Subcentercustomer: Boolean,
        Proportioning: Boolean,
        HeadquartersStu: Boolean,
        subcenter: Boolean,
        Subcentercustomersea: Boolean,
        see: Boolean,
        width: String,
        Mycustomerschool: Boolean,
        CustomerFollowlogsch: Boolean,
        size: {
            // 尺寸样式
            type: String,
            default: "mini"
        },
        check: {
            //是否显示多选框
            type: Boolean,
            default: true
        },
        // 是否显示分页
        order: {
            type: Boolean,
            default: true
        },
        align: {
            // 文本对齐方式
            type: String,
            default: "left"
        },
        maxHeight: {
            // 表格最大高度
            type: Number,
            default: 9000
        },
        showOperation: {
            // 是否显示操作组件
            type: Boolean,
            default: true
        },
        border: {
            // 是否显示边框
            type: Boolean,
            default: false
        },
        stripe: {
            // 是否显示斑马线
            type: Boolean,
            default: true
        },
        highlightCurrentRow: {
            // // 是否高亮当前行
            type: Boolean,
            default: true
        },
        switchValue: {
            type: Boolean,
            default: false
        },
        showOverflowTooltip: {
            // 是否单行显示
            type: Boolean,
            default: true
        },
        showBatchDelete: {
            // 是否显示操作组件
            type: Boolean,
            default: true
        },
        loading: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            // 分页信息
            pageRequest: {
                pageNum: 1,
                pageSize: 30
            },
            // loading: false, // 加载标识
            selections: [] // 列表选中列
        };
    },
    methods: {
        // 分页查询
        findPage: function() {
            // this.loading = true
            let callback = res => {
                // this.loading = false
            };
            this.$emit("findPage", {
                pageRequest: this.pageRequest,
                callback: callback
            });
        },
        //switch开关
        changeSwitch: function(index, row) {
            this.$emit("changeSwitch", { index: index, row: row });
        },
        // 选择切换
        selectionChange: function(selections) {
            this.selections = selections;
            this.$emit("selectionChange", { selections: selections });
        },
        // 选择切换
        handleCurrentChange: function(val) {
            this.$emit("handleCurrentChange", { val: val });
        },
        // 换页刷新
        refreshPageRequest: function(pageNum) {
            this.pageRequest.pageNum = pageNum;
            this.findPage();
        },
        // 当客户为A类时变红色
        rowStyle: function(row, rowIndex) {
            if (row.row.type === "A类") {
                return "color:red";
            } else if (row.row.customerType === "A") {
                return "color:red";
            } else if (row.row.type === "A类意向客户") {
                return "color:red";
            }
        },
        // 页数更改刷新
        sizeChange: function(pageSize) {
            this.pageRequest.pageSize = pageSize;
            this.findPage();
        },
        distributionoem: function(index, row) {
            this.$emit("distributionoem", { index: index, row: row });
        },
        // 编辑
        handleEdit: function(index, row) {
            this.$emit("handleEdit", { index: index, row: row });
        },
        handleSee: function(index, row) {
            this.$emit("handleSee", { index: index, row: row });
        },
        // 删除
        handleDelete: function(index, row) {
            this.$emit("handleDelete", { index: index, row: row });
        },

        // 绑定用户
        handleBinduser: function(index, row) {
            this.$emit("handleBinduser", { index: index, row: row });
        },

        // 解绑
        handleUntie: function(index, row) {
            this.$emit("handleUntie", { index: index, tqId: row.id });
        },

        // 批量删除
        handleBatchDelete: function() {
            let ids = this.selections.map(item => item.id).toString();
            this.delete(ids);
        },

        handleResetpass: function(index, row) {
            this.$emit("handleResetpass", { index: index, row: row });
        },
        // 领取
        handleReceive: function(index, row) {
            this.$emit("handleReceive", { index: index, row: row });
        },
        //查看跟进情况
        handleFollow(index, row) {
            this.$emit("handleFollow", { index: index, row: row });
        },
        // 删除操作
        delete: function(ids) {
            this.$confirm("确认删除选中记录吗？", "提示", {
                type: "warning"
            })
                .then(() => {
                    let params = [];
                    let idArray = (ids + "").split(",");
                    for (var i = 0; i < idArray.length; i++) {
                        params.push({ id: idArray[i] });
                    }
                    this.loading = true;
                    let callback = res => {
                        if (res.code == 200) {
                            this.$message({
                                message: "删除成功",
                                type: "success"
                            });
                            this.findPage();
                        } else {
                            this.$message({
                                message: "操作失败, " + res.msg,
                                type: "error"
                            });
                        }
                        this.loading = false;
                    };
                    this.$emit("handleDelete", {
                        params: params,
                        callback: callback
                    });
                })
                .catch(() => {});
        },
        ProportioningPop: function(index, row) {
            this.$emit("ProportioningPop", { index: index, row: row });
        },
        // 外呼
        handleoutbound: function(index, row) {
            this.$emit("handleoutbound", { index: index, row: row });
        },
        // 跟进
        handleFollow: function(index, row) {
            this.$emit("handleFollow", { index: index, row: row });
        },
        hasPerms: function(perms) {
            // 根据权限标识和外部指示状态进行权限判断
            return hasPermission(perms);
        },
        handleReport: function(index, row) {
            this.$emit("handleReport", { index: index, row: row });
        },
        handleCellClick:function(index,row){
          this.$emit('handleCellClick', {index:index, row:row})
        },
    },
    mounted() {
        this.refreshPageRequest(1);
    }
};
</script>

<style scoped>
.fl {
    float: left;
}
.demo /deep/ .el-switch__label {
    position: absolute;
    display: none;
    color: #fff;
}
.demo /deep/ .el-switch__label--left {
    z-index: 9;
    left: 20px;
}
.demo /deep/ .el-switch__label--right {
    z-index: 9;
    left: -5px;
}
.demo /deep/ .el-switch__label.is-active {
    display: block;
}
.demo /deep/ .el-switch__core {
    width: 58px !important;
}
</style>
